<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作爱奇异视频播放列表</title>
</head>
<style>
    .menu {
        list-style: none;
    }
    h3 {
        margin-left: 55px;
    }
    li {
        float: left;
        margin-left: 5px;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 10px;
    }
    li h4:first-child {
        font-size: 16px;
        color: #4D4D4D;
    }
    li p:nth-of-type(1) {
        font-size: 14px;
        color: #640000;
    }
    li p:nth-of-type(2) {
        font-size: 12px;
        color: blue;
    }
    img {
        border-radius: 10px;
    }
    /*鼠标悬停设置盒子阴影*/
    li:hover {
        box-shadow: 1px 1px 5px #666;
    }
</style>
<body>
<div>
    <h3>热播</h3>
    <ul class="menu">
        <li>
            <img src="img/img1.png" alt="">
            <h4>神武赵子龙</h4>
            <p>怒，林更新不抱网红抱女神</p>
            <p>点击次数：242445次</p>
        </li>
        <li>
            <img src="img/img2.png" alt="">
            <h4>旋风十一人</h4>
            <p>胡歌变教练在撩前女友</p>
            <p>点击次数：242445次</p>
        </li>
        <li>
            <img src="img/img3.png" alt="">
            <h4>太阳的后裔</h4>
            <p>宋慧乔吃嫩草</p>
            <p>点击次数：242445次</p>
        </li>
        <li>
            <img src="img/img4.png" alt="">
            <h4>山海经之赤影传说</h4>
            <p>娜扎张翰再度联手</p>
            <p>点击次数：242445次</p>
        </li>
    </ul>
</div>
</body>
</html>
